<template>
    <div id="brandlist">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="brand">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getData"
                class="content"
            >
                <router-link
                    tag="div"
                    :to="`/pages/branddetail?id=${item.id}`"
                    class="list"
                    v-for="(item,index) in listData"
                    :key="index"
                >
                    <img :src="item.app_list_pic_url" alt />
                    <div class="info">
                        <span>{{item.name}}</span>
                        <span>|</span>
                        <span>{{item.floor_price}}元起</span>
                    </div>
                </router-link>
            </van-list>
        </div>
    </div>
</template>
<script>
import { listaction } from "@/api/brand";
export default {
    data() {
        return {
            listData: [],
            page: 1,
            loading: false,
            finished: false,
        };
    },
    mounted() {},
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getData() {
            const data = await listaction({ page: this.page });
            console.log(data);
            this.listData = this.listData.concat(data.data);
            this.page++;
            this.loading = false;
            console.log(this.page);
            if (data.total == this.page - 1) {
                this.finished = true;
            }
            console.log("页面底部了");
        },
    },
};
</script>
<style lang="scss" scoped>
#brandlist {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .brand {
        height: calc(100% - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .content {
            width: 100%;
            .list {
                width: 10rem;
                height: 5.54667rem;
                position: relative;
                margin-bottom: 0.05333rem;
                img {
                    width: 100%;
                    height: 100%;
                }
                .info {
                    text-align: center;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate3d(-50%, -50%, 0);
                    span{
                        color: #fff;
                        font-size: 0.46667rem;
                        font-weight: 700;
                    }
                    :nth-child(2) {
                        padding: 0 0.06667rem;
                        font-size: 0.46667rem;
                        font-weight: 700;
                    }
                }
            }
        }
    }
}
</style>